import React from 'react'
import {Image, StyleSheet , NetInfo} from 'react-native'
import {StackNavigator, TabNavigator} from 'react-navigation'
import {COLOR} from './config'
import * as views from './views'
import login from './views/login'
import { connect } from 'react-redux'
import * as actions from './actions'
import store from './store'
import { bindActionCreators } from 'redux';
import { addNetListener } from './common/netInfo'


class stackNavigator extends React.Component{
    constructor(props){
        super(props);
        addNetListener();
    }
    componentWillMount(){
        
    }
    render(){
       return <AppNavigator/>
    }
}




const loginNav = StackNavigator(
    {
        login:  {screen : views.login}
    },
    {
        initialRouteName: 'login',
        headerMode: 'none',
        navigationOptions: {
          gesturesEnabled: false
        }
    }
)

const serviceNav = StackNavigator(
    {
        service: {screen : views.CustomeService}
    },
    {
        initialRouteName: 'service',
        headerMode: 'none',
        navigationOptions: {
            gesturesEnabled: false
        }
    }
)

const messageNav = StackNavigator(
    {
        message: {screen: views.MessageNotification}
    },
    {
        initialRouteName: 'message',
        navigationOptions: {
            gesturesEnabled: false
        }
    }
)

const homepageNav = StackNavigator(
    {
        HomePage: {screen: views.HomePage}
    },
    {
        initialRouteName: 'HomePage',
        headerMode: 'none',
        navigationOptions: {
            gesturesEnabled: false,
           
        }
    }
)

const tab = TabNavigator(
    {
        HomePage : {
            screen : homepageNav,
            navigationOptions: {
                
            }
        },
        service : {
            screen : serviceNav,
        },
        message : {
            screen : messageNav,
        }

    },
    {
        tabBarPosition : 'bottom',
        lazy: true,
        headerMode: 'none',
        tabBarOptions: {
            activeTintColor : COLOR.themeRedColor,
            activeBackgroundColor : COLOR.backgroundLighter,
            inactiveTintColor : COLOR.mainTextColor,
            inactiveBackgroundColor : COLOR.backgroundLighter,
            showIcon : true,
            showLabel : true,
            style: {backgroundColor : COLOR.backgroundDarker, height: 49},
            tabStyle : {paddingTop : 2, paddingBottom: 0},
            labelStyle: {fontSize: 12, marginTop: 0, marginBottom: 5}
        }
    }
)

const AppNavigator = StackNavigator(
    {
        login: {screen : loginNav},
        tab: {screen : tab}
    },
    {
        initialRoute : 'login',
        headerMode: 'none',
        navigationOptions :{
            gesturesEnabled : false
        }
    }
)


export default stackNavigator



export function navToTab (navigation) {
  navigation.navigate('tab')
}
